<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/metro/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui/themes/icon.css"/>">
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery-1.6.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.panel.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.datagrid.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.messager.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/ext-for-framework.js.jsp"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/locale/easyui-lang-zh_CN.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/js/common.js"/>"></script>
<style type="text/css">
#drag {
	width: 400px;
	height: 300px;
	cursor: move;
	position: absolute;
	top: 100px;
	left: 100px;
	border: solid 1px #ccc;
}

h2 {
	color: #fff;
	background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);
	color: #FFFFFF;
	height: 40px;
	line-height: 40px;
	margin: 0;
}
</style>


<body>
        <div class="container">
            <!-- Push Wrapper -->
            <div class="mp-pusher" id="mp-pusher">

                <!-- mp-menu -->
                <nav id="mp-menu" class="mp-menu">
                    <div class="mp-level">
                        <h2 class="icon icon-world">All Categories</h2>
                        <ul>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-display" href="#">Devices</a>
                                <div class="mp-level">
                                    <h2 class="icon icon-display">Devices</h2>
                                    <ul>
                                        <li class="icon icon-arrow-left">
                                            <a class="icon icon-phone" href="#">Mobile Phones</a>
                                            <div class="mp-level">
                                                <h2>Mobile Phones</h2>
                                                <ul>
                                                    <li><a href="#">Super Smart Phone</a></li>
                                                    <li><a href="#">Thin Magic Mobile</a></li>
                                                    <li><a href="#">Performance Crusher</a></li>
                                                    <li><a href="#">Futuristic Experience</a></li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li class="icon icon-arrow-left">
                                            <a class="icon icon-tv" href="#">Televisions</a>
                                            <div class="mp-level">
                                                <h2>Televisions</h2>
                                                <ul>
                                                    <li><a href="#">Flat Superscreen</a></li>
                                                    <li><a href="#">Gigantic LED</a></li>
                                                    <li><a href="#">Power Eater</a></li>
                                                    <li><a href="#">3D Experience</a></li>
                                                    <li><a href="#">Classic Comfort</a></li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li class="icon icon-arrow-left">
                                            <a class="icon icon-camera" href="#">Cameras</a>
                                            <div class="mp-level">
                                                <h2>Cameras</h2>
                                                <ul>
                                                    <li><a href="#">Smart Shot</a></li>
                                                    <li><a href="#">Power Shooter</a></li>
                                                    <li><a href="#">Easy Photo Maker</a></li>
                                                    <li><a href="#">Super Pixel</a></li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-news" href="#">Magazines</a>
                                <div class="mp-level">
                                    <h2 class="icon icon-news">Magazines</h2>
                                    <ul>
                                        <li><a href="#">National Geographic</a></li>
                                        <li><a href="#">Scientific American</a></li>
                                        <li><a href="#">The Spectator</a></li>
                                        <li><a href="#">The Rambler</a></li>
                                        <li><a href="#">Physics World</a></li>
                                        <li><a href="#">The New Scientist</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="icon icon-arrow-left">
                                <a class="icon icon-shop" href="#">Store</a>
                                <div class="mp-level">
                                    <h2 class="icon icon-shop">Store</h2>
                                    <ul>
                                        <li class="icon icon-arrow-left">
                                            <a class="icon icon-t-shirt" href="#">Clothes</a>
                                            <div class="mp-level">
                                                <h2 class="icon icon-t-shirt">Clothes</h2>
                                                <ul>
                                                    <li class="icon icon-arrow-left">
                                                        <a class="icon icon-female" href="#">Women's Clothing</a>
                                                        <div class="mp-level">
                                                            <h2>Women's Clothing</h2>
                                                            <ul>
                                                                <li><a href="#">Tops</a></li>
                                                                <li><a href="#">Dresses</a></li>
                                                                <li><a href="#">Trousers</a></li>
                                                                <li><a href="#">Shoes</a></li>
                                                                <li><a href="#">Sale</a></li>
                                                            </ul>
                                                        </div>
                                                    </li>
                                                    <li class="icon icon-arrow-left">
                                                        <a class="icon icon-male" href="#">Men's Clothing</a>
                                                        <div class="mp-level">
                                                            <h2>Men's Clothing</h2>
                                                            <ul>
                                                                <li><a href="#">Shirts</a></li>
                                                                <li><a href="#">Trousers</a></li>
                                                                <li><a href="#">Shoes</a></li>
                                                                <li><a href="#">Sale</a></li>
                                                            </ul>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li>
                                            <a class="icon icon-diamond" href="#">Jewelry</a>
                                        </li>
                                        <li>
                                            <a class="icon icon-music" href="#">Music</a>
                                        </li>
                                        <li>
                                            <a class="icon icon-food" href="#">Grocery</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a class="icon icon-photo" href="#">Collections</a></li>
                            <li><a class="icon icon-wallet" href="#">Credits</a></li>
                        </ul>
                    </div>
                </nav>
                <!-- /mp-menu -->

                <div class="scroller"><!-- this is for emulating position fixed of the nav -->
                    <div class="scroller-inner">
                        <!-- Top Navigation -->
                        <div class="codrops-top clearfix">
                            <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/CircularNavigation/"><span>Previous Demo</span></a>
                            <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16252"><span>Back to the Codrops Article</span></a></span>
                        </div>
                        <header class="codrops-header">
                            <h1>Multi-Level Push Menu <span>Off-screen navigation with multiple levels</span></h1>
                        </header>
                        <div class="content clearfix">
                            <div class="block block-40 clearfix">
                                <p><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></p>
                                <nav class="codrops-demos">
                                    <a class="current-demo" href="index.html">Demo 1: Overlapping levels</a>
                                    <a href="index2.html">Demo 2: Covering levels</a>
                                    <a href="index3.html">Demo 3: Overlapping levels with back links</a>
                                </nav>
                            </div>
                            <div class="block block-60">
                                <p><strong>Demo 1:</strong> Overlapping levels</p>
                                <p>This menu will open by pushing the website content to the right. It has multi-level functionality, allowing endless nesting of navigation elements.</p>
                                <p>The next level can optionally overlap or cover the previous one.</p>
                            </div>
                            <div class="info">
                                <p>If you enjoyed this you might also like:</p>
                                <p><a href="http://goo.gl/JLJ4v5">Responsive Multi-Level Menu</a></p>
                                <p><a href="http://goo.gl/qjbq9Y">Google Nexus Website Menu</a></p>
                            </div>
                        </div>
                    </div><!-- /scroller-inner -->
                </div><!-- /scroller -->

            </div><!-- /pusher -->
        </div><!-- /container -->
        <script src="js/classie.js"></script>
        <script src="js/mlpushmenu.js"></script>
        <script>
            new 
									mlPushMenu(document
											.getElementById('mp-menu'),
											document.getElementById('trigger'));
								</script>
    </body>
</html>